<template>
	<div class="index">
		<Header></Header>
		<Earth ref="earth"></Earth>
		<!-- 内容 -->
		<div class="conent">
			<div class="conent-flex">
				<!-- 左边 -->
				<div class="conent-flex-l">
					<div class="flex-t">
						<div class="flex-t-t">
							<div :class="['flex-t-t-l', Inv == 1 ? 'inv-h-se' : '']" @click="changetap(1)"><span>数据资源</span></div>
							<div :class="['flex-t-t-l', Inv == 3 ? 'inv-h-se' : '']" @click="changetap(3)"><span>功能资源</span></div>
						</div>
					</div>
					<div v-show="Inv == 1" class="flex-top">
						<!-- <el-tree :data="lists1" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
						<el-collapse v-model="dataResource.dtype" accordion>
							<el-collapse-item title="城市地质" name="1">
								<div>
									<el-tree :data="data" show-checkbox node-key="id" :check-strictly="true" @check-change="handleCheckChange" :props="defaultProps">
										<div class="showname" slot-scope="{ node }">
											<el-tooltip class="item" effect="dark" :content="node.label" placement="right-start">
												<span>{{ node.label }}</span>
											</el-tooltip>
										</div>
									</el-tree>
								</div>
							</el-collapse-item>
							<el-collapse-item title="地热资源" name="2">
								<div>
									<el-tree :data="data1" show-checkbox node-key="id" @check-change="handleCheckChange" :props="defaultProps">
										<div class="showname" slot-scope="{ node }">
											<el-tooltip class="item" effect="dark" :content="node.label" placement="right-start">
												<span>{{ node.label }}</span>
											</el-tooltip>
										</div>
									</el-tree>
								</div>
							</el-collapse-item>
							<el-collapse-item title="区域海洋" name="3">
								<div>
									<el-tree :data="data2" show-checkbox node-key="id" @check-change="handleCheckChange" :props="defaultProps">
										<div class="showname" slot-scope="{ node, data }">
											<el-tooltip class="item" effect="dark" :content="node.label" placement="right-start">
												<span>{{ node.label }}</span>
											</el-tooltip>
										</div>
									</el-tree>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>

					<!-- 功能资源 -->
					<div class="flex-top" v-show="Inv == 3">
						<el-collapse v-model="activeNames" v-for="(item, index) in list" :key="index" accordion @change="handleChangezy">
							<el-collapse-item :title="item.title">
								<div
									style="
                    display: flex;
                    justify-content: start;
                    flex-direction: row;
                    flex-wrap: wrap;
                    background-color: #ffffff;
                  "
								>
									<div class="flex-top-t1" @click="changecolorji(items.title, item.title, index)" v-for="(items, index) in item.data" :key="index">
										<div class="flex-top-t-l-u">
											<div class="flex-top-t-l-u-img"><img :src="url + items.photo" alt="" /></div>
											<div :class="getIndex == index ? 'changeColors' : ''">{{ items.title }}</div>
										</div>
									</div>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</div>
		<!-- 属性弹框  -->
		<div class="xbsj-model-box" @click="showclick" v-show="showT2">
			<div>
				<!-- 	<div style=" width: 100%;text-align: center;font-weight: bold;font-size: 20px; margin-bottom: 1rem;">
					数据资源
				</div> -->
				<div style="height: 32rem; overflow-y: auto; width: 100%">
					<div v-for="(item, index) in attrData" :key="index" style="display: flex">
						<div v-if="item.status == 1" style="width: 10rem;text-align: center;padding: 1rem;border: #eeeeee 1px solid;margin-right: -1px;margin-bottom: -1px;">
							{{ item.key }}
						</div>
						<div
							v-if="item.status == 1"
							style="
                width: 28.5rem;
                padding: 1rem;
                border: #eeeeee 1px solid;
                margin-right: -1px;
                margin-bottom: -1px;
                text-align: center;
              "
						>
							{{ item.value }}
						</div>
					</div>
				</div>
			</div>
			<div style=" padding: 0.5rem 0;display: flex;justify-content: center;align-items: center;">
				<el-button style="background-color: #ffffff; color: #000000" @click="closeShowT2">关闭</el-button>
				<el-button
					style="background-color: #2f6bbb;color: #ffffff;border: 1px solid #2f6bbb;"
					:icon="showTables ? 'el-icon-circle-close' : 'el-icon-circle-check'"
					@click="showTableClick"
				>
					{{ showTable }}
				</el-button>
			</div>
		</div>
	</div>
</template>
<script>
import { maps, resourcesE, mentalMapResources } from '../api/api.js';
import { informationFilesInfos } from '@/api/resourceCenter.js';
import Earth from './Earth/index';
import { getItem } from '@/utils/storage.js';
import DrawPolygon from './DrawPolygon';
import axios from 'axios';
import { ColorGeometryInstanceAttribute } from 'cesium';
export default {
	name: 'maps',
	components: {
		Earth
	},
	data() {
		return {
			activeNames: ['1'],
			data: [
				{
					type: '1',
					label: '地学产品',
					children: []
				},
				{
					type: '2',
					label: '图件',
					children: []
				},
				{
					type: '3',
					label: '资料档案',
					children: []
				},
				{
					type: '5',
					label: '钻孔',
					children: []
				}
				// {
				// 	type: '6',
				// 	label: '监测点',
				// 	children: []
				// }
			],
			data1: [
				{
					type: '1',
					label: '地学产品',
					children: []
				},
				{
					type: '2',
					label: '图件',
					children: []
				},
				{
					type: '3',
					label: '资料档案',
					children: []
				},
				{
					type: '5',
					label: '钻孔',
					children: []
				}
				// {
				// 	type: '6',
				// 	label: '监测点',
				// 	children: []
				// }
			],
			data2: [
				{
					type: '1',
					label: '地学产品',
					children: []
				},
				{
					type: '2',
					label: '图件',
					children: []
				},
				{
					type: '3',
					label: '资料档案',
					children: []
				},
				{
					type: '5',
					label: '钻孔',
					children: []
				}
				// {
				// 	type: '6',
				// 	label: '监测点',
				// 	children: []
				// }
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			showTable: '隐藏',
			showTables: false,
			show: true,
			shows: true,
			showT: true,
			// showT1: true,
			// 属性弹框
			showT2: false,
			//
			showThree: false,
			//
			clickid: '',
			//
			Inv: 1,
			list: [],
			lists1: [],
			selectedList: [],
			selectedListS: [],
			dataSourceMap: [],
			// 地质数据
			listArr: [],
			type: '',
			name: '',
			// 隐藏显示
			attrData: [],
			newArr: [],
			//
			// defaultProps: {
			// 	children: 'children',
			// 	label: 'label'
			// },
			opc: 1.0,
			// 二级
			childrens: [],
			width: '',
			dataResource: [],
			changeColor: false,
			//#region 淹没分析
			drawPolygonTool: undefined,
			floodBool: true,
			//#endregion
			getIndex: null,
			attrEnable: false,
			geologyLayer: null
		};
	},
	created() {
		this.lists();
		this.handleChange(1);
		this.handleChange(2);
		this.handleChange(3);
		let queryId = this.$route.query.id;
		let queryType = this.$route.query.type;
		let queryChecked = this.$route.query.checked;
		console.log(queryId);
		console.log(queryType);
		console.log(queryChecked);
		this.typeInformationFilesInfo(queryId, queryType, queryChecked);
	},
	mounted() {
		let earth = this.$root._earth;
		this.drawPolygonTool = new DrawPolygon({
			// eslint-disable-next-line no-undef
			Cesium: Cesium,
			callback: 'callback'
		});
		this.drawPolygonTool.setViewer(earth);
		this.drawPolygonTool.setThisWidget();
	},
	methods: {
		handleChange(val) {
			this.dataResource = [];
			this.data.map((value, index) => {
				let arrResource = {
					dtype: val,
					type: value.type,
					token: getItem('token')
				};
				if (val == 1) {
					mentalMapResources(arrResource).then(res => {
						this.data[index].children = res.data;
					});
				} else if (val == 2) {
					mentalMapResources(arrResource).then(res => {
						this.data1[index].children = res.data;
					});
				} else {
					mentalMapResources(arrResource).then(res => {
						this.data2[index].children = res.data;
					});
				}
			});
		},
		handleChangezy(val) {
			if (val != '') {
				this.getIndex = null;
			}
		},
		ToDigital(strDu, strFen, strMiao, len) {
			len = len > 6 || typeof len == 'undefined' ? 6 : len; //精确到小数点后最多六位
			strDu = typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu);
			strFen = typeof strFen == 'undefined' || strFen == '' ? 0 : parseFloat(strFen) / 60;
			strMiao = typeof strMiao == 'undefined' || strMiao == '' ? 0 : parseFloat(strMiao) / 3600;
			var digital = strDu + strFen + strMiao;
			if (digital == 0) {
				return '';
			} else {
				return digital.toFixed(len);
			}
		},
		// 点击切换
		changetap(value) {
			this.clickid = '';
			this.Inv = value;
			let formData = new FormData();
			this.tokes = sessionStorage.getItem('token');
			formData.append('token', this.tokes);
			formData.append('type', this.Inv);
			maps(formData).then(res => {
				if (this.Inv == 1) {
					this.lists1 = res.data;
				} else if (this.Inv == 3) {
					this.list = res.data;
				}
			});
		},
		closeShowT2() {
			this.showT2 = false;
		},
		//城市地质
		handleCheckChange(data, checked) {
			this.typeInformationFilesInfo(data.id, data.type, checked);
		},
		typeInformationFilesInfo(id, type, checked) {
			informationFilesInfos({ id, type }).then(res => {
				let self = this;
				if (checked) {
					var properties = [];
					let keys = Object.keys(res.data);
					let isJianCeDian = false; // 判断是否为监测点
					let isZuanKong = false; // 判断是否为钻孔
					let isDangAn = false; //判断是否为档案
					let txt = '';
					let isChanPin = false; //判断是否为产品
					let isTujian = false; //判断是否为图件
					let tujian_url = '';
					let id = undefined;
					let du_lng = undefined;
					let fen_lng = undefined;
					let miao_lng = undefined;
					let du_lat = undefined;
					let fen_lat = undefined;
					let miao_lat = undefined;
					let icon = undefined;
					let fileClass = undefined;
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];
						let obj = {};
						let key_value = res.data[key];
						if (key_value) {
							if (key_value && key_value['remarks'] === '统一编号') {
								isJianCeDian = true;
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '钻孔编号') {
								isZuanKong = true;
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '档号') {
								isDangAn = true;
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '题名') {
								txt = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '项目名称') {
								txt = key_value['value'];
							}
							if (key_value && key_value['remarks'] === 'http://117.73.254.217:2221/resources') {
								txt = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '共享链接') {
								isChanPin = true;
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '服务地址') {
								isTujian = true;
								tujian_url = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '文件类型') {
								fileClass = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '经度') {
								du_lng = parseFloat(key_value['value'].split('°')[0]);
								fen_lng = parseFloat(key_value['value'].split('°')[1].split('′')[0]);
								miao_lng = parseFloat(
									key_value['value']
										.split('°')[1]
										.split('′')[1]
										.replace('"', '')
								);
							}
							if (key_value && key_value['remarks'] === '起始经度（度）') {
								du_lng = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '起始经度（分）') {
								fen_lng = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '起始经度（秒）') {
								miao_lng = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '起始纬度（度）') {
								du_lat = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '起始纬度（分）') {
								fen_lat = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '起始纬度（秒）') {
								miao_lat = parseFloat(key_value['value']);
							}
							if (key_value && key_value['remarks'] === '纬度') {
								du_lat = parseFloat(key_value['value'].split('°')[0]);
								fen_lat = parseFloat(key_value['value'].split('°')[1].split('′')[0]);
								miao_lat = parseFloat(
									key_value['value']
										.split('°')[1]
										.split('′')[1]
										.replace('"', '')
								);
							}
							obj['key'] = key_value['remarks'];
							obj['value'] = key_value['value'];
							obj['status'] = key_value['status'];
							properties.push(obj);
						}
					}
					if (isJianCeDian) {
						icon = require('../assets/index/a3.png');
					} else if (isZuanKong) {
						icon = require('../assets/index/a4.png');
					} else if (isDangAn) {
						icon = require('../assets/index/a2.png');
					} else if (isChanPin) {
						if (fileClass === 'json') {
							self.controlGeojson(id);
						} else if (fileClass === '3dtiles') {
							self.controlTile(id);
						}
						return;
					} else if (isTujian) {
						self.addWmts(tujian_url);
						return;
					}
					let lng = self.ToDigital(du_lng, fen_lng, miao_lng, 6);
					let lat = self.ToDigital(du_lat, fen_lat, miao_lat, 6);
					self.$root._earth._viewer.entities.add({
						id: id,
						// eslint-disable-next-line no-undef
						position: Cesium.Cartesian3.fromDegrees(parseFloat(lng), parseFloat(lat)),
						property: properties,
						label: {
							text: txt,
							font: '9px Helvetica',
							showBackground: true,
							// eslint-disable-next-line no-undef
							pixelOffset: new Cesium.Cartesian2(0, 25)
							// heightReference: HeightReference.CLAMP_TO_GROUND
						},
						billboard: {
							image: icon,
							height: 28,
							width: 28,
							// heightReference: HeightReference.CLAMP_TO_GROUND,
							// eslint-disable-next-line no-undef
							pixelOffset: new Cesium.Cartesian2(0, -0)
						}
					});
				} else {
					let self = this;
					let keys = Object.keys(res.data);
					let isChanPin = false;
					let tujian_url = '';
					let fileClass = undefined;
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];
						let key_value = res.data[key];
						if (key_value) {
							if (key_value && key_value['remarks'] === '统一编号') {
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '钻孔编号') {
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '档号') {
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '共享链接') {
								isChanPin = true;
								id = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '文件类型') {
								fileClass = key_value['value'];
							}
							if (key_value && key_value['remarks'] === '服务地址') {
								tujian_url = key_value['value'];
								let childrens = this.$root._earth.sceneTree.root.children;
								childrens.forEach(data => {
									if (data.czmObject.name === '地质服务_' + tujian_url) {
										data.czmObject = {};
									}
								});
							}
						}
					}
					if (isChanPin) {
						if (fileClass === 'json') {
							self.controlGeojson(id);
						} else if (fileClass === '3dtiles') {
							self.controlTile(id);
						}
						return;
					}
					self.$root._earth._viewer.entities.removeById(id);
				}
			});
		},
		//添加wmts
		addWmts(url) {
			axios.get(url).then(data => {
				let xml = new DOMParser().parseFromString(data.data, 'application/xml');
				let wmtsProvider = {};
				let wmts = {};
				let layer = xml.getElementsByTagName('Layer')[0];
				wmts['url'] = layer.getElementsByTagName('ResourceURL')[0].attributes['template'].value;
				wmts['layer'] = layer.getElementsByTagName('ows:Identifier')[0].innerHTML;
				wmts['style'] = layer.getElementsByTagName('Style')[0].getElementsByTagName('ows:Identifier')[0].innerHTML;
				wmts['tileMatrixSetID'] = xml.getElementsByTagName('TileMatrixSet')[0].innerHTML;
				let tileMatrixLables = xml
					.getElementsByTagName('TileMatrixSetLink')[0]
					.getElementsByTagName('TileMatrixSetLimits')[0]
					.getElementsByTagName('TileMatrixLimits');
				let lables = [];
				for (let i = 0; i < tileMatrixLables.length; i++) {
					lables.push(tileMatrixLables[i].getElementsByTagName('TileMatrix')[0].innerHTML);
				}
				wmts['tileMatrixLabels'] = lables;
				wmts['maximumLevel'] = lables.length - 1;
				wmts['format'] = 'PNG';
				wmts['tilingScheme'] = 'Geographic';
				let rectangle = [
					parseFloat(xml.getElementsByTagName('ows:LowerCorner')[0].innerHTML.split(' ')[0]) * (Math.PI / 180),
					parseFloat(xml.getElementsByTagName('ows:LowerCorner')[0].innerHTML.split(' ')[1]) * (Math.PI / 180),
					parseFloat(xml.getElementsByTagName('ows:UpperCorner')[0].innerHTML.split(' ')[0]) * (Math.PI / 180),
					parseFloat(xml.getElementsByTagName('ows:UpperCorner')[0].innerHTML.split(' ')[1]) * (Math.PI / 180)
				];
				wmtsProvider['xbsjType'] = 'Imagery';
				wmtsProvider['name'] = '地质服务_' + url;
				// layer.getElementsByTagName("ows:Identifier")[0].innerHTML;
				wmtsProvider['rectangle'] = rectangle;
				wmtsProvider['xbsjImageryProvider'] = {
					WebMapTileServiceImageryProvider: wmts,
					type: 'WebMapTileServiceImageryProvider'
				};
				// this.$refs.cesium.addWmts({ czmObject: wmtsProvider });
				this.$root._earth.sceneTree.root.children.push({
					czmObject: wmtsProvider
				});
			});
		},

		// 获取一组
		getGroupByTitles(title) {
			return this.lists1.find(i => i.title === title);
		},
		// 点击三级
		changecolor(e, i, a, id) {
			this.clickid = id;
			let groupValues1 = this.getGroupByTitles(i);
			let exitsSecondMenus1 = [];
			if (groupValues1) {
				exitsSecondMenus1 = groupValues1.data.map(i => i.title);
				// 过滤掉当前组内的所有二级
				this.selectedListS = this.selectedListS.filter(i => exitsSecondMenus1.indexOf(i) === -1);
			}
			// this.selectedListS.push(e);
			//
			let astr = a.toString();
			if (astr.substr(astr.length - 7, 7) === 'geojson') {
				this.controlGeojson(a);
			} else {
				this.controlTile(a);
			}
		},
		controlGeojson(url) {
			let param1 = arguments[1];
			let params = arguments[2];
			let name = url.split('/')[url.split('/').length - 1];
			if (param1) {
				if (this.$root._earth._viewer.entities.values.length > 1) {
					this.unloadGeojson(url, param1, params);
				} else {
					this.loadGeojson(url, param1, params);
				}
			} else {
				if (this.containsName(this.$root._earth._viewer.dataSources._dataSources, name)) {
					this.unloadGeojson(url, param1, params);
				} else {
					this.loadGeojson(url, param1, params);
				}
			}
		},
		containsName(objs, name) {
			let result = false;
			for (let ds in objs) {
				if (objs[ds]._name === name) {
					result = true;
					break;
				}
			}
			return result;
		},
		loadGeojson(url) {
			let params = arguments[2];
			let obj = new Object();
			obj.url = url;
			let self = this;
			// eslint-disable-next-line no-undef
			if (params) {
				if (params.jiance) {
					obj.data = Cesium.GeoJsonDataSource.load(url, {
						markerSize: 44,
						markerColor: Cesium.Color.RED,
						markerSymbol: 'water'
					});
				} else if (params.zuankong) {
					obj.data = Cesium.GeoJsonDataSource.load(url, {
						markerSize: 44,
						markerColor: Cesium.Color.RED,
						markerSymbol: 'monument'
					});
				} else if (params.ziliaodangan) {
					obj.data = Cesium.GeoJsonDataSource.load(url, {
						markerSize: 44,
						markerColor: Cesium.Color.RED,
						markerSymbol: 'post'
					});
				}
				this.dataSourceMap.push(obj);
				obj.data.then(function(dataSource) {
					dataSource.clustering.enabled = true;
					dataSource.clustering.pixelRange = 15;
					dataSource.clustering.minimumClusterSize = 3;
					self.$root._earth._viewer.dataSources.add(dataSource);
				});
			} else {
				obj.data = Cesium.GeoJsonDataSource.load(url, {
					markerSize: 30,
					markerColor: Cesium.Color.fromRandom(),
					markerSymbol: 't',
					// eslint-disable-next-line no-undef
					stroke: Cesium.Color.fromRandom({ alpha: 1.0 }),
					strokeWidth: 3
				});
				this.dataSourceMap.push(obj);
				obj.data.then(function(dataSource) {
					self.$root._earth._viewer.dataSources.add(dataSource);
				});
			}
			// this.$root._earth._viewer.flyTo(obj.data);
		},
		unloadGeojson(url) {
			let param1 = arguments[1];
			let self = this;
			if (param1) {
				self.$root._earth._viewer.entities.removeAll();
			}
			this.dataSourceMap
				.filter(ele => {
					return ele.url === url;
				})[0]
				.data.then(dataSource => {
					self.$root._earth._viewer.dataSources.remove(dataSource);
				});
			this.dataSourceMap = this.dataSourceMap.filter(ele => {
				return ele.url !== url;
			});
		},
		controlTerrain(url) {
			if (this.containsKey(this.$root._earth.sceneTree.$refs, url) && this.$root._earth.sceneTree.$refs[url].czmObject.url != '') {
				this.unloadTerrain(url);
			} else {
				this.loadTerrain(url);
			}
		},
		loadTerrain(url) {
			let terrain = {
				ref: url,
				czmObject: {
					xbsjType: 'Terrain',
					name: url,
					xbsjTerrainProvider: {
						type: 'XbsjCesiumTerrainProvider',
						XbsjCesiumTerrainProvider: {
							url: url,
							requestVertexNormals: true,
							requestWaterMask: true
						}
					}
				}
			};
			if (this.$root._earth.sceneTree.$refs[url]) {
				this.$root._earth.sceneTree.$refs[url].czmObject = terrain.czmObject;
			} else {
				this.$root._earth.sceneTree.root.children.push(terrain);
			}
		},
		unloadTerrain(url) {
			this.$root._earth.sceneTree.$refs[url].czmObject = {};
		},
		controlTile(url) {
			let tileJson = arguments[1];
			if (this.containsKey(this.$root._earth.sceneTree.$refs, url) && this.$root._earth.sceneTree.$refs[url].czmObject.url != '') {
				this.unloadTile(url);
			} else {
				this.loadTile(url, tileJson);
			}
		},
		containsKey(obj, key) {
			let result = false;
			for (let k in obj) {
				if (k === key) {
					result = true;
					break;
				}
			}
			return result;
		},
		sceneTreeRemoveItem(fucText) {
			this.$root._earth.sceneTree.root.children.forEach(element => {
				if (element.czmObject.name === fucText) {
					element.czmObject = {};
				}
			});
		},
		loadTile(url) {
			let tileJson = arguments[1];
			let tile;
			if (tileJson) {
				tile = tileJson;
			} else {
				tile = {
					ref: url,
					czmObject: {
						xbsjType: 'Tileset',
						name: url,
						url: url
					}
				};
			}
			if (this.$root._earth.sceneTree.$refs[url]) {
				this.$root._earth.sceneTree.$refs[url].czmObject = tile.czmObject;
			} else {
				this.$root._earth.sceneTree.root.children.push(tile);
			}
			// this.$root_earth.sceneTree.$refs[url].czmObject.maximumScreenSpaceError = 1.0
			this.$root._earth.sceneTree.$refs[url].czmObject.flyTo();
		},
		unloadTile(url) {
			this.$root._earth.sceneTree.$refs[url].czmObject = {};
		},
		// 功能资源
		isSelectedSomeThing(menu) {
			return this.selectedList.indexOf(menu) != -1;
		},
		// 获取一组
		getGroupByTitle(title) {
			return this.list.find(i => i.title === title);
		},
		//#region 淹没分析方法
		flood() {
			if (this.floodBool) {
				this.drawPolygonTool.startCreate();
			} else {
				this.$root._earth.czm.viewer.entities.removeAll();
			}
			this.floodBool = !this.floodBool;
		},
		//#endregion

		changecolorji(e, i, index) {
			console.log(e);
			console.log(i);
			console.log(index);
			this.getIndex = index;
			this.changeColor = !this.changeColor;
			let self = this; // eslint-disable-line no-unused-vars
			switch (e) {
				case '距离测量':
					this.$root._earth.analyzation.measurement.type = 'SPACE_DISTANCE';
					break;
				case '高度测量':
					this.$root._earth.analyzation.measurement.type = 'TRIANGLE_DISTANCE';
					break;
				case '面积测量':
					this.$root._earth.analyzation.measurement.type = 'SPACE_AREA';
					break;
				case '多点测量':
					this.$root._earth.analyzation.measurement.type = 'POINT';
					break;
				case '结束测量':
					this.$root._earth.analyzation.measurement.type = 'NONE';
					this.$root._earth && this.$root._earth.analyzation.measurement.clearResults();
					break;
				case '监测点':
					this.controlGeojson('http://117.73.254.217:2221/resources/others/监测点.geojson', null, { custer: true, jiance: true });
					break;
				case '钻孔':
					this.controlGeojson('http://117.73.254.217:2221/resources/others/钻孔.geojson', null, { custer: true, zuankong: true });
					break;
				case '地质资料':
					this.controlGeojson('http://117.73.254.217:2221/resources/others/资料档案.geojson', null, { custer: true, ziliaodangan: true });
					break;
				case '地下模式':
					this.$root._earth.terrainEffect.subSurfaceEnabled = true;
					break;
				case '地面透明':
					if (this.opc < 0.0) {
						this.opc = 1.0;
					} else {
						this.opc -= 0.1;
					}
					this.$root._earth.terrainEffect.surfaceOpacity = this.opc;
					break;
				case '地形服务':
					this.controlTerrain('http://117.73.254.217:2221/resources/sddem');
					break;
				case '淹没分析':
					this.flood();
					break;
				case '地质影像':
					this.controlGeologyLayer();
					break;
				case '属性查询':
					if (!self.attrEnable) {
						let viewer = this.$root._earth._viewer;
						// this.$root._earth.interaction.picking.enabled = true;
						// eslint-disable-next-line no-undef
						this.entityClickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
						this.entityClickHandler.setInputAction(function(click) {
							var pickedObject = viewer.scene.pick(click.position);
							if (pickedObject) {
								// if (pickedObject.id.label === undefined) {
								let properties = [];
								if (typeof pickedObject.id === 'undefined') {
									let propertyNames = pickedObject.getPropertyNames();
									propertyNames.forEach(x => {
										properties.push({
											key: x,
											value: pickedObject.getProperty(x)
										});
									});
									self.showT2 = true;
									self.attrData = properties;
									self.newArr = properties;
								} else {
									if (pickedObject.id.property) {
										self.attrData = pickedObject.id.property;
										self.newArr = pickedObject.id.property;
									} else {
										let properties_value = [];
										let properties_name = pickedObject.id.properties._propertyNames;
										for (let j = 0; j < properties_name.length; j++) {
											let p = {};
											p['key'] = properties_name[j];
											if (p['key'] === 'PAC') {
												return;
											}
											p['value'] = pickedObject.id.properties[properties_name[j]]._value;
											properties_value.push(p);
										}
										self.attrData = properties_value;
										self.newArr = properties_value;
									}
									self.showT2 = true;
									// self.showAttrBoard = true;
									pickedObject.selected = true;
									self.$root._earth._viewer.selectedEntity = pickedObject;
								}
							}
							// }
							// eslint-disable-next-line no-undef
						}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
						self.attrEnable = true;
					} else {
						self.showT2 = false;
						this.entityClickHandler.destroy();
						this.entityClickHandler = undefined;
						self.attrEnable = false;
					}
					break;
				default:
					break;
			}
			// 弹框方法
			// this.open();
			// 显示弹框
			// this.showT2 = true;
			// this.showT2=!this.showT2
			// 更新选中内容
			// 清空同层选中的
			let groupValues = this.getGroupByTitle(i);
			let exitsSecondMenus = [];
			if (groupValues) {
				exitsSecondMenus = groupValues.data.map(i => i.title);
				// 过滤掉当前组内的所有二级
				this.selectedList = this.selectedList.filter(i => exitsSecondMenus.indexOf(i) === -1);
			}
			// 数组
			this.selectedList.push(e);
		},
		// 智能地图
		lists() {
			let formData = new FormData();
			this.tokes = sessionStorage.getItem('token');
			formData.append('token', this.tokes);
			formData.append('type', '1');
			maps(formData).then(res => {
				this.lists1 = res.data;
				// children
				this.lists1.forEach(e => (e.shows = true));
				for (var i = 0; i < this.lists1.length; i++) {
					if (this.lists1[i].children) {
						this.lists1[i].children.forEach(e => (e.showThree = false));
						this.childrens = this.lists1[i].children;
					}
				}
			});
		},
		// #region 地质图加载三件套
		controlGeologyLayer() {
			let fucText = '地质图';
			if (this.geologyLayer === null) {
				this.addGeologyLayer(fucText);
			} else {
				this.removeGeologyLayer(fucText);
			}
		},
		addGeologyLayer(fucText) {
			this.geologyLayer = {
				czmObject: {
					xbsjType: 'Imagery',
					name: fucText,
					rectangle: [-0.000006283172728788819, -1.570790043622168, 3.1415800872443294, 1.5707963267948966],
					xbsjImageryProvider: {
						XbsjImageryProvider: {},
						UrlTemplateImageryProvider: {},
						WebMapTileServiceImageryProvider: {
							url: 'http://219.142.81.86:80/igs/rest/ogc/TAS10R52000000/WMTSServer/1.0.0/TAS10R52000000/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
							format: 'PNG',
							layer: 'TAS10R52000000',
							style: 'default',
							tileMatrixSetID: 'EPSG:4326_TAS10R52000000_028mm_GB',
							tileMatrixLabels: [
								'EPSG:4326_TAS10R52000000_028mm_GB:0',
								'EPSG:4326_TAS10R52000000_028mm_GB:1',
								'EPSG:4326_TAS10R52000000_028mm_GB:2',
								'EPSG:4326_TAS10R52000000_028mm_GB:3',
								'EPSG:4326_TAS10R52000000_028mm_GB:4',
								'EPSG:4326_TAS10R52000000_028mm_GB:5',
								'EPSG:4326_TAS10R52000000_028mm_GB:6',
								'EPSG:4326_TAS10R52000000_028mm_GB:7',
								'EPSG:4326_TAS10R52000000_028mm_GB:8',
								'EPSG:4326_TAS10R52000000_028mm_GB:9',
								'EPSG:4326_TAS10R52000000_028mm_GB:10',
								'EPSG:4326_TAS10R52000000_028mm_GB:11',
								'EPSG:4326_TAS10R52000000_028mm_GB:12',
								'EPSG:4326_TAS10R52000000_028mm_GB:13'
							],
							tilingScheme: 'Geographic',
							maximumLevel: 13
						},
						createTileMapServiceImageryProvider: {},
						type: 'WebMapTileServiceImageryProvider'
					}
				}
			};
			try {
				this.$root._earth.sceneTree.root.children.push(this.geologyLayer);
			} catch (e) {
				console.log('影像图加载出现问题');
			}
		},
		removeGeologyLayer(fucText) {
			this.sceneTreeRemoveItem(fucText);
			this.geologyLayer = null;
		},
		// #endregion
		// 打开
		// open() {
		//   this.showT2 = true;
		//   this.attrData = [{ key: 0, value: "内容" }];
		// },
		// 属性弹框
		ok() {
			this.showT2 = !this.showT2;
		},
		showclick() {
			this.$emit('showclick');
		},
		//
		// handleNodeClick(data) {
		// 	if (data.id != undefined && data.url != undefined) {
		// 		console.log(data.url);
		// 		let a = data.url;
		// 		let astr = a.toString();
		// 		console.log(astr.substr(astr.length - 4, 4));
		// 		if (astr.substr(astr.length - 7, 7) === 'geojson') {
		// 			this.controlGeojson(a);
		// 		} else {
		// 			this.controlTile(a);
		// 		}
		// 	}
		// },
		showTableClick() {
			let that = this;
			that.showTables = !that.showTables;
			if (that.showTables) {
				that.showTable = '全显';
				let isData = [];
				that.attrData.map((val, index) => {
					if (val.value != null) {
						isData.push(that.attrData[index]);
					}
				});
				that.attrData = isData;
			} else {
				that.showTable = '隐藏';
				that.attrData = that.newArr;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.active {
	color: #0b61ff;
}
/deep/.el-tree-node__content {
	height: 2.2rem;
	background: #fff !important;
	overflow-y: auto;
}
// 鼠标移入样式
/deep/.el-tree-node__content:hover {
	background: #fff !important;
}
/deep/.el-tree-node:focus > .el-tree-node__content {
	background-color: #fff; //节点的背景颜色
	color: #0b61ff; //节点的字体颜色
}
/deep/.el-tree-node.is-expanded > .el-tree-node__children {
	display: block;
	overflow: auto;
	max-height: 10rem;
}
/deep/.el-tree-node__children::-webkit-scrollbar {
	/*隐藏滚轮*/
	height: 0;
	width: 0;
}
.con {
	display: block;
	overflow: auto;
	max-height: 10rem;
	min-height: 1rem;
	background-color: #ffffff;
	.detail3 {
		// width: 15.7rem;
		height: 2rem;
		font-size: 1rem;
		display: flex;
		align-items: center;
		background: #fff;
		border-bottom: 0.1rem solid #e4e4e4;
		justify-content: space-around;
		.detail3-text {
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			cursor: pointer;
		}
	}
}
.actives {
	color: #0b61ff;
	font-weight: bold;
}
.actives1 {
	color: #0b61ff;
	font-weight: bold;
}
.conent {
	height: auto;
	.conent-flex {
		height: auto;
		position: absolute;
		.conent-flex-l {
			width: 18rem;
			height: auto;
			margin-left: 0.5rem;
			.flex-t {
				height: auto;
				background: #fff;
				margin-bottom: 1rem;
				.flex-t-t {
					border-bottom: 0.1rem solid #e4e4e4;
					margin-top: 0.5rem;
					display: flex;
					.inv-h-se {
						color: #0b61ff;
					}
					.flex-t-t-l {
						width: 50%;
						height: 2rem;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
					}
				}
				.flex-t-t1 {
					width: 14rem;
					height: 1.5rem;
					border-radius: 4rem;
					margin: 0 auto;
					margin-top: 0.6rem;
					border: 0.1rem solid #e4e4e4;
					display: flex;
					justify-content: space-around;
					align-items: center;
					input {
						border: none;
						outline: none;
					}
					input:focus {
						outline: none;
					}
				}
			}
			.flex-top {
				height: auto;
				.flex-top-t:hover {
					color: blue;
				}
				.flex-top-t {
					padding: 0 2rem;
					height: 3rem;
					background: #146ac1;
					font-size: 1rem;
					display: flex;
					align-items: center;
					justify-content: space-around;
					cursor: pointer;
					.flex-top-t-l {
						// width: auto;
						width: 100%;
						color: #fff;
					}
				}
				.flex-top-t1 {
					width: 33.33%;
					height: 5rem;
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					.flex-top-t-l-u {
						text-align: center;
					}
					img {
						width: 1rem;
						height: 1rem;
					}
				}
				.flex-top-t2 {
					width: 100%;
					height: 2rem;
					background: #78afe8;
					font-size: 1rem;
					display: flex;
					align-items: center;
					justify-content: space-around;
					cursor: pointer;
					.flex-top-t-l {
						width: auto;
						color: #fff;
					}
					.flex-top-t1 {
						width: 100%;
						height: 2rem;
					}
				}
			}
		}
		.conent-flex-r {
			width: auto;
			height: auto;
			display: flex;
			flex-direction: column;
			.conent-flex-r-t {
				width: 2rem;
				height: 2rem;
				border-radius: 3rem;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 1rem;
				cursor: pointer;
			}
		}
	}
	.images {
		width: 100%;
		height: auto;
	}
}
//
.xbsj-model-box {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px #d6d6d6 solid;
	opacity: 1;
	top: 25%;
	left: 30%;
	border-radius: 6px;
	z-index: 10009;
	padding: 1rem 2rem 1rem 2rem;
	width: 43rem;
	height: 35rem;
	// box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
	color: #ffffff;
	font-size: 14px;
	font-family: \5fae\8f6f\96c5\9ed1;
}
.xbsj-model-footers {
	text-align: right;
	border-top: 1px solid #d2d2d2;
	margin-top: 20rem;
	padding: 0.5rem 0;
}
.flex-top-t1-1 {
	// width: 100%;
	cursor: pointer;
	text-align: left;
	height: 2.8rem;
	line-height: 2.8rem;
	padding-left: 5rem;
	border-bottom: 0.1rem #e4e4e4 solid;
}
.con::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}

/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background-color: #146ac1;
	border-color: #146ac1;
}
/deep/.el-collapse-item__header {
	background-color: #146ac1;
	color: #ffffff;
	padding-left: 2rem;
}
.conent .conent-flex .conent-flex-l .flex-t .flex-t-t .inv-h-se[data-v-f3110ca0] {
	color: #146ac1;
}
.el-collapse {
	border-bottom: 0 solid #ebeef5;
}
/deep/.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
	display: inline-block;
}
/deep/.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
	display: none;
}
/deep/.el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
	display: none;
}
.changeColors {
	color: #146ac1;
	font-weight: bold;
	border-bottom: 2px #146ac1 solid;
}
.showname {
	// width: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
</style>
